<template> 
    <div class="state-page clear-both"> 
        <div class="head-bg">
            <image class="img"  src="https://rqys.hleason.com/dist/images/user_bg.png"></image> 
            <div class="content text-center">
                <div class="img-box">
                    <image class="img"  :src="userDate.avatar?'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+userDate.avatar:'https://rqys.hleason.com/dist/images/plh.png'"></image> 
                </div>
                <div class="name">{{userDate.user_name}}</div>
                <div class="capsule">{{userDate.level_txt}}</div>
            </div>
        </div>
        
        <div class="user-tabs text-center">
            <div class="tab-item" @click="jumpLink(1)">
                <p>{{detailState.count}}</p>
                <p class="info">动态</p>
            </div>
            <div class="tab-item" @click="jumpLink(2)">
                <p>{{detailState.attention}}</p>
                <p class="info">关注</p>
            </div>
            <div class="tab-item" @click="jumpLink(3)">
                <p>{{detailState.collect}}</p>
                <p class="info">赞</p>
            </div>
        </div>
        <div class="list-title"> 
            <r-tag title="他的动态"></r-tag>
        </div>  
        <div class="content">
            <paste-list @jump="jumpCardDetail" @optBtn="optBtn" v-for="(item,index) in stateList" :key="index" :item="item"></paste-list> 
        </div>
        <!--<div class="new-msg text-center"><i class="iconfont iconfont-jiajianzujianjiahao"></i></div>-->
    </div> 
</template>

<script>
import pasteList from '@/components/tpl/paste-list' 
import rTag from './../../components/tpl/tag'
import * as api from '@/utils/api' 
export default { 
     
    onShow(){ 
        // this.wxInfo=JSON.parse(wx.getStorageSync('wxInfo'));
        this.userDate=JSON.parse(wx.getStorageSync('userDate'));
        if(this.userDate.level=='level_one'){
            this.userDate.level_txt='游客'
        }else if(this.userDate.level=='level_two'){
            this.userDate.level_txt='初级会员'
        }else if(this.userDate.level=='level_three'){
            this.userDate.level_txt='高级会员'
        }
        this.getStateData();
        this.getList();
    },
    data () {
        return {
            wxInfo:{},
            userDate:{},
            detailState:{},
            stateList:[],
        }
    },
    methods:{
        jumpLink(val){
            if(val==1){
                let url = `./../state-page/main`;
                wx.navigateTo({url}) 
            }else if(val==2){
                let url = `./../relev/main`;
                wx.navigateTo({url}) 
            }
        },
        //个人中心列表数量
        getStateData(){
            let vm = this;
            let body={
                model: "Users",
                with:{
                    "0":"collect",
                    "1":"attention",
                    "2":"count",
                    "3":"orderCount"
                },
                condition: {
                    id:wx.getStorageSync('u_id')
                }
            };
            api.getInfoById(body).then(res=>{
                if(res.data.code==200){
                    vm.detailState=res.data.data;
                }
            })
        },
        //跳转帖子详情
        jumpCardDetail(item){ 
            let url=''; 
            url= `./../card-detail/main?forumId=${item.forum_id}`; 
            wx.navigateTo({url})  
        },
        optBtn(val,item){
            let vm = this;
            if(val=="collect"){ 
                let body={
                    model: "Records",
                    data:{
                        uid: wx.getStorageSync('u_id'),      
                        resource_id: item.topics.id,   
                        type:1,        
                        resource_type:7,   
                        category:"1" 
                    } 
                }; 
                if(item.is_collect==1){
                    api.deleteData(body).then(res=>{
                        if(res.data.code==200){
                            vm.getList();
                            wx.showToast({icon:'none', title: '取消成功' })
                        }
                    });
                }else{
                    api.createSite(body).then(res=>{
                        if(res.data.code==200){
                            vm.getList();
                            wx.showToast({icon:'none', title: '收藏成功' })
                        }
                    });
                }
            }
        },
        getList(){
            let vm = this;
            let body={
                model: "Forums",
                with:{
                    "0":"topics",
                    "1":"collects",
                    "2":"shares",
                    "3":"comments"
                },
                limit:30,
                offset:0,
                orderBy:"create_time desc",
                condition: {
                    "uid":wx.getStorageSync('u_id')
                }
            };
            api.commonSite(body).then(res=>{
                if(res.data.code==200){
                    vm.stateList=res.data.data.data;
                }
            });
        },
    },
    components: {
        pasteList,
        rTag
    },
}
</script>

<style scoped lang="scss">
.state-page{ 
    
    background:#F7F7F7;
    min-height:100%; 
    .head-bg{
        width:100%;
        height:320rpx;
        position:relative;
        .img{
            width:100%;
            height:100%;
        }
        .content{
            position:absolute;
            top:60rpx;
            width:100%;
            padding:20rpx;
            box-sizing:border-box;
            .img-box{
                width:100rpx;
                height:100rpx;
                margin:0 auto;
                .img{
                    width:100%;
                    height:100%;
                    border-radius:50%;
                }
            }
            .name{
                color:#fff;
                font-size:30rpx;
                margin:15rpx 0;
            }
            .capsule{
                display:inline-block;
                padding:4rpx 20rpx;
                font-size:25rpx;
                background:red;
                color:#fff;
                border-radius:20rpx;
            }
        }
    }
    .user-tabs{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:Center; 
        font-size:26rpx;
        background:#fff;
        padding:16rpx 0;
        .tab-item{
            flex:1;
            .info{
                color:#949494;
            }
        }
    }
    .list-title{
        width:100%;
        margin:20rpx 0;
    }
    .new-msg{
        position:fixed;
        bottom:100rpx; 
        right:20rpx;
        color:#CD4640;
        height:80rpx;
        line-height:80rpx;
        width:80rpx;
        border-radius:50%;
        border:1rpx solid #CD4640;
    }
}
</style>
